import React, {useEffect,} from 'react'
import {createForm} from 'rc-form'
import {connect} from 'react-redux'
import './account-info.css'

// components
import GoBackLayout from "../../layouts/GoBackLayout/GoBackLayout"
import CustomButton from "../../shared-components/CustomButton/CustomBotton"

// antd-mobile
import {InputItem, List, Picker, WingBlank} from 'antd-mobile'

// utils
import {mustInputBeforeSubmit,} from "../../utils/commonfunc"

// mock data
import {banks, districts,} from "../../utils/mockdata"

const AccountInfoContainer = (props) => {
    // props
    const {
        history,
        form: {
            getFieldProps,
            validateFields,
        },
    } = props

    // dispatch
    const {
        emitError,
        doSubmitAccountInfo,
        doFetchAccountInfo,
    } = props

    useEffect(() => {
        const uid = localStorage.getItem('userid')
        doFetchAccountInfo({uid,})
    }, [])

    // effects
    const checkBeforeSubmit = (vals) => {
        // 提交前检测表单
        const mapper = {
            bankCard: '银行卡号',
            bank: '开户行',
            district: '省份',
            realName: '姓名',
            subbranch: '支行名称',
            idNumber: '身份证号码',
            mobile: '手机号码',
        }

        return mustInputBeforeSubmit(mapper, vals, emitError)
    }

    const submit = () => {
        // 提交表单逻辑
        validateFields((err, vals) => {
            if (checkBeforeSubmit(vals)) {
                vals.uid = localStorage.getItem('userid')
                doSubmitAccountInfo(vals)
            }
        })
    }

    // templates
    // 银行信息
    const inputTextAlignRightStyle = {
        textAlign: 'right',
        fontSize: '1rem',
    }

    const accountInfoTemplate = (
        <List renderHeader={() => <p style={{color: '#333', fontSize: '1rem',}}>银行信息</p>}>
            <InputItem
                {...getFieldProps('bankCard')}
                // type="bankCard"
                placeholder='请输入银行账户卡号'
                style={inputTextAlignRightStyle}
            >
                <span style={{fontSize: '1rem', color: '#333',}}>银行卡号</span>
            </InputItem>
            <Picker
                extra={<span style={{fontSize: '1rem', color: '#333', opacity: '0.7',}}>请选择</span>}
                data={banks}
                title="开户行"
                {...getFieldProps('bank',)}
            >
                <List.Item arrow="down">
                    <span style={{fontSize: '1rem', color: '#333',}}>开户银行</span>
                </List.Item>
            </Picker>
            <Picker
                extra={<span style={{fontSize: '1rem', color: '#333', opacity: '0.7',}}>省份</span>}
                data={districts}
                title="省份"
                {...getFieldProps('district',)}
            >
                <List.Item arrow="down">
                    <span style={{fontSize: '1rem', color: '#333',}}>省份</span>
                </List.Item>
            </Picker>
            <InputItem
                {...getFieldProps('subbranch')}
                placeholder='请输入支行名称'
                style={inputTextAlignRightStyle}
            >
                <span style={{fontSize: '1rem', color: '#333',}}>
                    支行名称
                </span>
            </InputItem>
        </List>
    )

    const accountAppendixTemplate = (
        <WingBlank>
            <div className='appendix-ctn'>
                <p className='appendix-text'>请电话至银行确认支行名称，如填写作物将导致打款失败</p>
            </div>
        </WingBlank>
    )

    // 付款人信息
    const payeeInfoTemplate = (
        <List renderHeader={() => <p style={{color: '#333', fontSize: '1rem',}}>收款人信息</p>}>
            <InputItem

                {...getFieldProps('realName')}
                placeholder='请输入绑卡人姓名'
                style={inputTextAlignRightStyle}
            >
                <span style={{fontSize: '1rem', color: '#333',}}>收款人姓名</span>
            </InputItem>
            <InputItem
                {...getFieldProps('idNumber')}
                placeholder='请输入身份证号'
                style={inputTextAlignRightStyle}
            >
                <span style={{fontSize: '1rem', color: '#333',}}>身份证号</span>
            </InputItem>
            <InputItem
                {...getFieldProps('mobile')}
                placeholder='请输入手机号码'
                style={inputTextAlignRightStyle}
                // type='phone'
            >
                <span style={{fontSize: '1rem', color: '#333',}}>绑定手机</span>
            </InputItem>
        </List>
    )

    const payeeAppendixTemplate = (
        <WingBlank>
            <div className='appendix-ctn'>
                <p className='appendix-text'>请如实填写接受本平台兑换款额的银行卡信息，如有因您的信息填写错误而导致转款失败的情况，本平台概不负责； 为了您的财产安全，收款人姓名，身份证和银行卡号绑定（绑定实名认证请前往个人信息-实名认证）后，将默认为您的信息如收款人姓名和身份证需要修改请联系客服</p>
            </div>
        </WingBlank>
    )

    // 提交按钮

    const submitBtnTemplate = (
        <div className='account-info-submit'>
            <WingBlank>
                <CustomButton
                    inline='true'
                    onClick={submit}
                    shadow='0px 6px 10px 0px rgba(250,114,104,0.4)'
                >确认提取</CustomButton>
            </WingBlank>
        </div>
    )

    return (
        <GoBackLayout
            title='收款信息'
            history={history}
        >
            {accountInfoTemplate}
            {accountAppendixTemplate}
            {payeeInfoTemplate}
            {payeeAppendixTemplate}
            {submitBtnTemplate}
        </GoBackLayout>
    )
}

const mapDispatchToProps = ({global: {globalError,}, user: {doSubmitAccountInfo, doFetchAccountInfo,},}) => ({
    emitError: (err) => globalError(err),
    doFetchAccountInfo: (payload) => doFetchAccountInfo(payload),
    doSubmitAccountInfo: (payload) => doSubmitAccountInfo(payload),
})

export default connect(
    null,
    mapDispatchToProps,
)(createForm()(AccountInfoContainer))



